<template>
  <div class="app-container detail">
    <!-- <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="任务基本信息" name="1"> <BasicInfo></BasicInfo> </el-tab-pane>
      <el-tab-pane label="客户信息" name="4"> <Customer></Customer> </el-tab-pane>
      <el-tab-pane label="检查内容" name="2"> <Content></Content> </el-tab-pane>
      <el-tab-pane label="影像资料采集" name="3"> <Viewdata></Viewdata> </el-tab-pane>
    </el-tabs> -->
    <div>
      <el-row class="bgc">
        <el-col :span="24">任务基本信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="formLabelAlign" :inline="true">
        <el-form-item label="任务编号">
          <el-input v-model="formLabelAlign.openBank" disabled />
        </el-form-item>
        <el-form-item label="借据编号">
          <el-input v-model="formLabelAlign.openAddr" disabled />
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input v-model="formLabelAlign.cardNo" disabled />
        </el-form-item>
        <el-form-item label="客户号">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="检查类型">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="客户类型">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="放款日期">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="担保到期日">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="业务种类">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="担保方式">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="还款方式">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="任务生成日期">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="要求完成日期">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="实际完成日期">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="主管客户经理">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="任务执行机构">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="任务执行人">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="所在机构">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">客户信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="formLabelAlign" :inline="true">
        <el-form-item label="姓名">
          <el-input v-model="formLabelAlign.openBank" disabled />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="formLabelAlign.openAddr" disabled />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formLabelAlign.cardNo" disabled />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="联系电话1">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="联系电话2">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="婚姻状况">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="个人月收入(元)">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="现居住地址">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="工作单位备注">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="配偶姓名">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="个人月收入(元)">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">客户基本信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="360px" :model="formLabelAlign" :inline="true">
        <el-form-item label="联系地址、联系方式是否发生变化？">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="家庭状况是否发生变化、是否对还款产生影响？">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="家庭财务状况是否出现重大负债？">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="担保人(实际控制人)及其亲属是否出现突发或？">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="抵质押物是否被有关机关依法查封、冻结、扣押？">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="是否存在重复抵押">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="抵质押物市场价格是否下降">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">检查结论</el-col>
      </el-row>
      <el-form :label-position="labelPosition" :model="formLabelAlign" label-width="360px">
        <el-form-item label="是否检查异常">
          <el-switch v-model="loanInfo.loan_stages" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="对我行的授信风险状况总体评价、主要风险点、建议风险分类结果及理由等">
          <el-input v-model="formLabelAlign.userName" disabled type="textarea" />
        </el-form-item>
        <el-form-item label="建议采取具体的描述及说明">
          <el-input v-model="formLabelAlign.userName" disabled type="textarea" />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">影像资料</el-col>
      </el-row>
      <div class="flexImg">
        <div style="margin-bottom: 5px">现场检查影像信息</div>
        <div>
          <el-image :src="url" lazy style="width: 100px; height: 100px" />
        </div>
      </div>
      <div class="flexImg">
        <div style="margin-bottom: 5px">客户保后资料更新/担保人信息/经营经销单据(原件)、纳税凭证(原件)、银行流水或工资单(原件)</div>
        <div>
          <el-image :src="url" lazy style="width: 100px; height: 100px" />
        </div>
      </div>
      <div class="flexImg">
        <div style="margin-bottom: 5px">担保人资料更新</div>
        <div>
          <el-image :src="url" lazy style="width: 100px; height: 100px" />
        </div>
      </div>
      <div class="flexImg">
        <div style="margin-bottom: 5px">其他资料</div>
        <div>
          <el-image :src="url" lazy style="width: 100px; height: 100px" />
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import router from "@/router";

const route = useRoute();
const labelPosition = ref("right");
const url = ref("https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg");
const state = reactive({
  loanInfo: {}, //担保信息
  formLabelAlign: {
    branchName: "", //支行名称
  },
  lists: [], //展示菜单项
});
const { formLabelAlign, loanInfo } = toRefs(state);
const activeName = ref("1");
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}
.flexImg {
  width: 100%;
  height: 150px;
  padding-left: 20px;
  margin-bottom: 5px;
}
:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}
</style>
